<!DOCTYPE html>

<html>
<head>
    <title>Bucket</title>

    <style>
        output {
            color: blue;
        }

        .floatingControls {
            background: rgba(0, 0, 0, 0.1);
            border: thin solid skyblue;
            -webkit-box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 4px;
            -moz-box-shadow: rgba(100, 140, 230, 0.5) 2px 2px 6px;
            box-shadow: rgba(100, 140, 230, 0.5) 2px 2px 6px;
            padding: 15px;
            font: 12px Arial;
        }

        #canvas {
            background: skyblue;
            -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        #scoreboard {
            background: rgba(255, 255, 255, 0.5);
            position: absolute;
            left: 755px;
            top: 20px;
            color: blue;
            font-size: 18px;
            padding: 5px;
        }

        #controls {
            position: absolute;
            left: 285px;
            top: 20px;
        }
    </style>
</head>

<body>
<canvas id='canvas' width='800' height='450'>
    Canvas not supported
</canvas>

<div id='scoreboard' class='floatingControls'>0</div>

<div id='controls' class='floatingControls'>
    Launch velocity (m/s):
    <output id='launchVelocityOutput'></output>
    m/s<br/>
    Launch angle (degrees):
    <output id='launchAngleOutput'></output>
    degrees<br/>
</div>

<script src='../../shared/js/requestNextAnimationFrame.js'></script>
<script src='../../shared/js/sprites.js'></script>
<script src='example.js'></script>
</body>
</html>
